<template>
  <div>
    <p class='question'>
      1.  您平常阅读的行业杂志，首先是（{{test01Answer01}}），其次（{{test01Answer02}}），最后是（{{test01Answer03}}），或者其他<span class='otherAnswer'>{{otherOptions}}</span>
    </p>
    <ul>
      <li v-for='item in options' :data-answer='item.nid' @click='choose($event)'>
        <i class='answer_logo'></i>
        <span class='answer_text'>{{item.ntext}}</span>
      </li>
    </ul>
    <p class='otherText'>您可以在这里填写其他：</p>
    <input type="text" name="txt" class='other' v-model='otherOptions'>
    <a class='btn' @click='next()'>下一步</a>
  </div>
</template>

<script>
export default {
  name: 'test01',
  data () {
    return {
      options: [
      {nid: 'A', ntext: 'A《暖通空调》'},
      {nid: 'B', ntext: 'B《暖通空调》'},
      {nid: 'B', ntext: 'B《暖通空调》'}
      ],
      otherOptions: '',
      test01Answer01: '',
      test01Answer02: '',
      test01Answer03: ''
    }
  },
  methods: {
    next () {
      // window.sessionStorage['userName'] = this.userName
      // window.sessionStorage['company'] = this.company
      // window.sessionStorage['phoneNum'] = this.phoneNum
      this.router.push({ path: '/test02' })
    },
    choose ($event) {
      if (this.test01Answer01 === '') {
        this.test01Answer01 = event.currentTarget.getAttribute('data-answer')
      } else {
        if (this.test01Answer02 === '') {
          this.test01Answer02 = event.currentTarget.getAttribute('data-answer')
        } else {
          this.test01Answer03 = event.currentTarget.getAttribute('data-answer')
        }
      }
    }
  }
}
</script>

<style scope>
.question{
  color: #005494;
  font-size:0.4rem;
  text-align: left;
}
.other{
  width: 8.0rem;
  height: 0.8rem;
  border-radius: 0.106667rem;
  padding-left: 0.346667rem;
  outline: none;
  border: 0.026667rem solid #D6DEE1;
}
.otherText{
  color: #005494;
  font-size:0.4rem;
  text-align: left;
}
.otherAnswer{
  border-bottom:1px solid #D6DEE1;
}
ul{
  display: flex;
  flex-wrap: wrap;
}
li{
  width: 50%;
  height: 1.173333rem;
}
.answer_logo{
  display: inline-block;
  border: 0.053333rem solid #2B91DE;
  border-radius: 50%;
  width: 0.533333rem;
  height: 0.533333rem;
  vertical-align: middle;
}
.answer_text{
  color: #333;
  font-size: 0.4rem;
  vertical-align: middle;
}
.btn{
  display: block;
  text-decoration: none;
  width: 8.0rem;
  height: 1.173333rem;
  background-color:#2B91DE;
  text-align:center;
  line-height: 1.173333rem;
  color: #fff;
  font-size: 0.426667rem;
  margin: 0.973333rem auto 0;
  border-radius: 0.106667rem;
}
</style>
